<template>
  <!-- 头部导航区内容 -->
  <div class='header'>
    <img class='header-logo' src="@/assets/images/HuiZhang.png"/>
    <div class='header-navigation'>
      <button
        class='navigation-ecah'
        :class='{ show: echaIndex == index }'
        v-for='(item, index) in navigatorData'
        :key='index'
        @click='$router.push({ path: item.path }), (echaIndex = index)'
      >
        {{ item.name }}
      </button>
      <button class='back' @click='loginout()'>退出登录</button>
    </div>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
export default {
  props: {
    jump: {}
  },

  data() {
    return {
      echaIndex: 0,
      navigatorData: [
        { name: '班级', path: '/goclass' },
        { name: '统计', path: '/statistical' },
        { name: '寄语', path: '/remarks' },
        { name: '我的', path: '/myInfoTeacher' },
      ],
    };
  },

  mounted() {
    this.echaIndex = this.jump
  },
  methods: {
    loginout() {
      this.$confirm('您确认退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeToken()
          this.$router.go(0)
        })
        .catch((err) => err)
    }
  }
}
</script>

<style>
/* 头部导航区内容 */
.header {
  position: relative;
  height: 4.75rem;
  margin: 1.25rem 26.875rem 1.25rem 26.875rem;
}
.header-logo {
  width: 5rem;
  height: 3.75rem;
  position: absolute;
}

/* 导航区 */
.header-navigation {
  position: absolute;
  right: 0;
}

/* 标签导航区 */
.navigation-ecah {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}

.show {
  color: #7c0000;
  padding-bottom: 0.3125rem;
  border-bottom: 0.1875rem solid #7c0000;
}
.back {
  margin-left: 10rem;
  margin-right: 2rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  background-color: #7c0000;
  color: #ffffff;
  border: #7c0000;
}
</style>